<template>
	<view>
		<uni-nav-bar leftText="关注" title="推荐" rightText="热榜"></uni-nav-bar>
			<view style = "display: flex;flex-flow: row nowrap;">	
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" >
							<view id="demo1" class="scroll-view-item_H uni-bg-red">全部</view>
							<view id="demo2" class="scroll-view-item_H uni-bg-green">分类1</view>
							<view id="demo3" class="scroll-view-item_H uni-bg-blue">分类2</view>
							<view id="demo4" class="scroll-view-item_H">分类3</view>
							<view id="demo5" class="scroll-view-item_H">分类4</view>
							<view id="demo6" class="scroll-view-item_H">分类5</view>
				</scroll-view>
				<uni-icons type="list" size="25">list</uni-icons>
			</view>	
		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
						@cancel="cancel" @clear="clear">
		</uni-search-bar>
		
		<view class="uni-common-mt" style="background:#ffffff; padding:20rpx;border-radius: 25px;border: 2px solid #ececec;margin-top: 10px;
			margin-bottom: 20px;" >
		    <view class="uni-flex uni-column" >
					<h4>【XX通知】邦德多伦多国际学院招生宣讲会通知</h4>
		            <view class="uni-flex uni-row" style = "display: flex;flex-flow: row nowrap;">
						<uni-icons type="contact" size="23">contact</uni-icons>
						<h6> 用户名  2020-4-20 16:32</h6>
					</view>
		            <view class="uni-flex uni-row">
						<h5>《互联网+时代课堂教学新策略》 著作权归作者所有。商业转载请联系作者获 得授权，非商业转载请注明...</h5>
					</view>
					<!-- <view class="page">
					        <view class="image-list">
					                <view class="image-content">
					                    <image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
					                        @error="imageError"></image>
					                </view>
					        </view>
					</view> -->
			</view>
		</view>
		
		<view class="uni-common-mt" style="background:#ffffff; padding:20rpx;border-radius: 25px;border: 2px solid #ececec;margin-top: 10px;
			margin-bottom: 20px;">
		    <view class="uni-flex uni-column">
					<h4>【XX通知】邦德多伦多国际学院招生宣讲会通知</h4>
		            <view class="uni-flex uni-row" style = "display: flex;flex-flow: row nowrap;">
						<uni-icons type="contact" size="23">contact</uni-icons>
						<h6> 用户名  2020-4-20 16:32</h6>
					</view>
		            <view class="uni-flex uni-row">
						<h5>《互联网+时代课堂教学新策略》 著作权归作者所有。商业转载请联系作者获 得授权，非商业转载请注明...</h5>
					</view>
					<!-- <view class="page">
					        <view class="image-list">
					                <view class="image-content">
					                    <image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
					                        @error="imageError"></image>
					                </view>
					        </view>
					</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '../../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				// array: [{
				//             mode: 'aspectFill',
				//         }],
				// // src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
				
				
				nodes: [{
				        name: 'div',
				        attrs: {
				            class: 'div-class',
				            style: 'line-height: 200px; color: red; text-align:left'
				        },
				}],
				searchValue: ''
				}
			},
		methods: {
				search(res) {
					uni.showToast({
						title: '搜索：' + res.value,
						icon: 'none'
					})
				},
				input(res) {
					console.log('----input:', res)
				},
				clear(res) {
					uni.showToast({
						title: 'clear事件，清除值为：' + res.value,
						icon: 'none'
					})
				},
				blur(res) {
					uni.showToast({
						title: 'blur事件，输入值为：' + res.value,
						icon: 'none'
					})
				},
				focus(e) {
					uni.showToast({
						title: 'focus事件，输出值为：' + e.value,
						icon: 'none'
					})
				},
				cancel(res) {
					uni.showToast({
						title: '点击取消，输入值为：' + res.value,
						icon: 'none'
					})
				}
				// data_contentHandle(){
				// 	uni.navigateTo({
				// 		url: 'pages/data_content/data_content'
				// 	});
				// }
			},
		components:{
			uniNavBar
		}
	}
</script>

<style lang="scss">
	.search-result {
			padding-top: 10px;
			padding-bottom: 20px;
			text-align: center;
		}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		show-scrollbar: "false";
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 20%;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>
